import { forwardRef } from 'react'

const SignatureEditor = forwardRef(({ settings }, ref) => {
  const {
    text,
    backgroundColor,
    backgroundImage,
    textColor,
    fontSize,
    textAlign,
    fontFamily,
    padding
  } = settings

  const style = {
    backgroundColor,
    backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    color: textColor,
    fontSize: `${fontSize}px`,
    textAlign,
    fontFamily,
    padding: `${padding}px`,
    minHeight: '150px',
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-word'
  }

  return (
    <div 
      ref={ref}
      className="signature-display"
      style={style}
    >
      {text}
    </div>
  )
})

SignatureEditor.displayName = 'SignatureEditor'

export default SignatureEditor 